<template>
  <div
    class="drag optional"
    :class="{ selected: index === selectedIndex }"
    @click.stop="$parent.$parent.onEditer(index)"
  >
    <div class="diy-product" :style="{ background: item.style.background }">
      <div :class="['display__' + item.style.display]">
        <ul
          class="product-list"
          :class="['column__' + item.style.column]"
          :style="getUlwidth(item)"
        >
          <li
            class="product-item"
            v-for="(product, index) in item.data"
            :key="index"
          >
            <!-- 单列商品 -->
            <template v-if="item.style.column == 1">
              <div class="product-item-box">
                <!-- 商品图片 -->
                <div class="product-cover">
                  <img v-img-url="product.image" />
                </div>
                <div class="product-info">
                  <!-- 商品名称 -->
                  <div v-if="item.style.show.productName" class="product-title">
                    <span>{{ product.productName }}</span>
                  </div>
                  <!-- 商品卖点 -->
                  <div
                    v-if="item.style.show.sellingPoint"
                    class="selling-point gray9"
                  >
                    <span>{{ product.sellingPoint }}</span>
                  </div>
                  <!-- 商品销量 -->
                  <div v-if="item.style.show.productSales" class="already-sale">
                    <span>已售{{ product.productSales }}件</span>
                  </div>
                  <!-- 商品价格 -->
                  <div class="price d-s-c">
                    <div v-if="item.style.show.productPrice" class="orange">
                      <span>¥</span>
                      <span class="f18 fb">{{ product.productPrice }}</span>
                    </div>
                    <div
                      class="ml10 gray9 text-d-line"
                      v-if="item.style.show.linePrice && product.linePrice > 0"
                    >
                      <span>¥</span>
                      <span>{{ product.linePrice }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <!-- 两列三列 -->
            <template v-else>
              <div class="product-cover"><img v-img-url="product.image" /></div>
              <div class="product-info p-0-10">
                <div v-if="item.style.show.productName" class="product-title">
                  {{ product.productName }}
                </div>
                <div class="price d-s-c f12">
                  <div v-if="item.style.show.productPrice" class="orange">
                    <span>¥</span>
                    <span class="">{{ product.productPrice }}</span>
                  </div>
                  <div
                    class="ml4 gray9 text-d-line"
                    v-if="item.style.show.linePrice && product.linePrice > 0"
                  >
                    ¥{{ product.linePrice }}
                  </div>
                </div>
              </div>
            </template>
          </li>
        </ul>
      </div>
    </div>
    <div class="btn-edit-del">
      <div class="btn-del" @click.stop="$parent.$parent.onDeleleItem(index)">
        删除
      </div>
    </div>
  </div>
</template>

<script>
import ProductApi from "@/api/product.js";
export default {
  data() {
    return {
      /*商品列表*/
      tableData: {},
      /*分类id*/
      categoryId: 0,
    };
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  props: ["item", "index", "selectedIndex"],
  methods: {
    getData() {
      let self = this;
      ProductApi.productList(
        {
          categoryId: self.categoryId,
        },
        true
      )
        .then((res) => {
          self.tableData = res.data.list.data;
        })
        .catch((error) => {
          self.loading = false;
        });
    },

    /*计算宽度*/
    getUlwidth(item) {
      if (item.style.display == "slide") {
        let total = 0;
        if (item.params.source == "choice") {
          total = item.data.length;
        } else {
          total = item.defaultData.length;
        }
        let w = 0;
        if (item.style.column == 2) {
          w = total * 150;
        } else {
          w = total * 100;
        }
        return "width:" + w + "px;";
      }
    },
  },
};
</script>

<style scoped>
.diy-product .product-list.column__1 .product-item {
  padding: 10px;
  border-bottom: 1px solid #dddddd;
  background: #ffffff;
}

.diy-product .product-list.column__1 .product-item-box {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.diy-product .display__slide {
  overflow-x: auto;
}
.diy-product .display__slide .product-list {
  display: flex;
  justify-content: flex-start;
}
.diy-product .display__slide .product-list.column__2 .product-item {
  width: 150px;
}
.diy-product .display__slide .product-list.column__3 .product-item {
  width: 100px;
}
.diy-product .display__slide .product-list .product-item {
  margin-right: 10px;
}
.diy-product .product-list img {
  width: 100%;
}

.diy-product .product-list.column__1 .product-cover {
  width: 100px;
  height: 100px;
}

.diy-product .product-list.column__1 .product-info {
  margin-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.diy-product .product-list .product-title {
  margin-top: 4px;
  height: 40px;
  line-height: 20px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.diy-product .display__list .column__2,
.diy-product .display__list .column__3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.diy-product .product-list.column__2 .product-item {
  width: 170px;
  margin-bottom: 10px;
  background: #ffffff;
}
.diy-product .product-list.column__2 .product-item .product-cover {
  width: 110px;
  height: 110px;
  overflow: hidden;
  margin: 10px auto;
}

.diy-product .product-list.column__3 .product-item {
  width: 117px;
  margin-bottom: 10px;
  background: #ffffff;
}
.diy-product .product-list.column__3 .product-item .product-cover {
  width: 117px;
  height: 117px;
  overflow: hidden;
}
.diy-product .product-list.column__3 .product-item .product-cover img {
  width: 117px;
}

.diy-product .product-list.column__2 .product-title,
.diy-product .product-list.column__3 .product-title {
  height: 40px;
  overflow: hidden;
}
</style>
